<script lang="ts" setup name="marketingMember">
import { ref } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import { getMessageListAPI, deleteMessageAPI } from "@/api/modules/activity";
import { useRouter, useRoute } from "vue-router";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { Activity } from "@/api/interface";
import { useHandleData } from "@/hooks/useHandleData";

const columns: any = [
  { type: "index", label: "序号", width: 60 },
  { sortable: true, label: "状态", prop: "statusName", width: 120 },
  { sortable: true, label: "内容", prop: "content" },
  // { sortable: true,label: "门店信息", prop: "storeId", width: 120 },
  { sortable: true, label: "创建时间", width: 200, prop: "createTime" },
  {
    sortable: true,
    label: "发送时间",
    prop: "sendTime",
    width: 200,
    search: {
      el: "date-picker",
      key: "birthDayRange",
      props: {
        type: "datetimerange",
        format: "YYYY-MM-DD",
        dataTimeRange: "YYYY-MM-DD"
      }
    }
  },
  { prop: "userCount", sortable: true, label: "会员数量", width: 120 },
  // { sortable: true,label: "使用模版", prop: "templateCode", width: 160 },
  {
    width: 150,
    prop: "operation",
    label: "操作"
  }
];

const router = useRouter();
const route = useRoute();
const tableRef = ref<ProTableInstance | null>(null);

const onDelete = async (item: any) => {
  await useHandleData(deleteMessageAPI, { id: item.id }, "删除【" + item.id + "】短信");
  tableRef.value?.getTableList();
};
</script>

<template>
  <div class="table-box">
    <ProTable ref="tableRef" title="群发短信列表" row-key="id" :request-api="getMessageListAPI" :columns="columns" :indent="20">
      <template #tableHeader>
        <el-button type="primary" @click="router.push('/marketing/marketing-member-edit')">创建群发短讯</el-button>
      </template>

      <template #operation="{ row }">
        <div>
          <el-button type="text" @click="onDelete(row)">删除</el-button>
          <!-- <el-button type="text">编辑</el-button> -->
        </div>
      </template>
    </ProTable>
  </div>
</template>

<style lang="scss" scoped></style>
